<template>
  <div class="message-panel">
    <!-- 您有 {{messageList.length}} 条消息通知 -->
    <div class="message-header">消息通知</div>
    <div class="message-content">
      <div
        v-for="item in messageList"
        :key="item.key"
        class="message-item"
        @click="toDetail(item.message_id)"
      >
        <div class="item">
          <div class="itemCon">
            <div class="message-avatar" :style="{ background: item.bgColor }">
              {{ item.title.substr(0, 1) }}
            </div>
            <div>
              <div class="sender">{{ item.title }}</div>
              <div class="message-cotent">
                <div class="message-con">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="time">
          <li class="fa fa-clock-o"></li>
          {{ item.time }}
        </div>
      </div>
    </div>

    <el-tabs
      v-model="activeName"
      @tab-click="handleClick(false)"
      style="margin-left: 26px"
    >


    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "MessagePanel",
  props: {},
  data() {
    return {
      messages2: "0",
      messages3: "0",
      messages4: "0",
      messages5: "0",
      messages6: "0",
      messageList: [],
      activeName: "2",
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      path: {
        p2: "",
        p3: "",
        p4: "",
        p5: "",
        p6: "",
      },
    };
  },

  methods: {
    // 随机颜色

    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getRandomColor() {
      var c1 = this.getRandom(0, 255);
      var c2 = this.getRandom(0, 255);
      var c3 = this.getRandom(0, 180);
      return "rgb(" + c1 + "," + c2 + "," + c3 + ")";
    },
    // 日期转换
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    timeFormat(timestamp) {
      var time = new Date(timestamp);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        this.add0(month) +
        "-" +
        this.add0(date) +
        " " +
        this.add0(hours) +
        ":" +
        this.add0(minutes) +
        ":" +
        this.add0(seconds)
      );
    },
    toPage(type) {
      this.$router.push(this.path[type]);
    },
    // isNum 查询数量
    handleClick: function (isNum) {
      this.loading = true;
      let that = this;
      let params = {
        type: this.activeName,
      };
      // 如果 isNum 为true则查询数量 否则查询列表
      // if (isNum) params.type = 0;
      this.$api.message.sys_message_list(params).then((res) => {
        if (res.code == 0) {
          this.messages2 = res.count.report_repairCount;
          this.messages3 = res.count.dijia_complaintCount;
          this.messages4 = res.count.weCat_consultationAndhelpCount;
          this.messages5 = res.count.wx_online_serverCount;
          this.messages6 = res.count.holiday_pointCount;
          if (this.activeName == "2") {
            this.list2 = res.data;
            this.path.p2 = "/commadmin/Repair";
          }
          if (this.activeName == "3") {
            this.list3 = res.data;
            this.path.p3 = "/commadmin/Suggestion";
          }
          if (this.activeName == "4") {
            this.list4 = res.data;
            this.path.p4 = "/commadmin/Helps";
          }
          if (this.activeName == "5") {
            this.list5 = res.data;
            this.path.p5 = "/commadmin/Onlines";
          }
          if (this.activeName == "6") {
            this.list6 = res.data;
            this.path.p6 = "/commadmin/Holiday";
          }
        }
      });
    },
    // 跳转详情
    toDetail(id) {
      let that = this;
      let params = {
        message_id: id,
      };
      this.$api.message.changeStatus(params).then((res) => {
        if (res.code == 0) {
          that.getMessage();
          that.$bus.$emit("changeStatus", "123");
          that.$router.replace({
            path: "/commadmin/Helps",
            query: {
              id,
            },
          });
        }
        {
          console.log("删除失败");
        }
      });
    },
    toMessageList() {
      let that = this;
      let time = new Date();
      let params = {
        read_time: time.getTime(),
      };
      this.$api.message.changeStatus(params).then((res) => {
        if (res.code == 0) {
          that.$bus.$emit("changeStatus", "123");
          that.$router.push({
            path: "/commadmin/Helps",
          });
        }
      });
    },
  },
  mounted() {
    this.handleClick(true);
  },
};
</script>

<style scoped>
.message-panel {
  font-size: 15px;
  width: 300px;
  margin: -12px;
}
.message-header {
  font-size: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
}

.message-item {
  border-color: rgba(180, 190, 190, 0.8);
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 10px;
  padding-bottom: 20px;
}
.item {
  display: flex;
  justify-content: space-between;
}
.itemCon {
  display: flex;
}
.message-item:hover {
  cursor: pointer;
  background: #b1a6a61e;
}
.message-avatar {
  margin: 0 auto;
  color: #fff;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 60px;
  font-size: 20px;
  margin: 0 10px;
}
.sender {
  font-size: 16px;
  font-weight: bold;
}
.time {
  font-size: 12px;
  float: right;
  padding-right: 10px;
}
.message-cotent {
  width: 200px;
}
.message-con {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.message-footer {
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: rgba(180, 190, 190, 0.8);
  border-top-width: 1px;
  border-top-style: solid;
}
.message-footer:hover {
  cursor: pointer;
  background: #b1a6a61e;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 90px;
  float: left;
}
</style>
